<template>
  <view class="password-container">
    <view class="page-header">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">←</text>
        <text class="back-text">返回</text>
      </view>
      <text class="page-title">修改密码</text>
    </view>
    
    <view class="password-form">
      <view class="form-group">
        <text class="form-label">当前密码</text>
        <input class="form-input" type="password" v-model="passwordData.oldPassword" placeholder="请输入当前密码" />
      </view>
      
      <view class="form-group">
        <text class="form-label">新密码</text>
        <input class="form-input" type="password" v-model="passwordData.newPassword" placeholder="请输入新密码" />
      </view>
      
      <view class="form-group">
        <text class="form-label">确认新密码</text>
        <input class="form-input" type="password" v-model="passwordData.confirmPassword" placeholder="请再次输入新密码" />
      </view>
      
      <view class="password-tips">
        <text class="tips-title">密码要求：</text>
        <text class="tips-item">• 长度至少6位字符</text>
        <text class="tips-item">• 建议包含字母、数字和特殊字符</text>
      </view>
    </view>
    
    <button class="submit-btn" @click="changePassword">确认修改</button>
  </view>
</template>

<script>
import { updatePassword } from '@/api/auth.js'

export default {
  data() {
    return {
      passwordData: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 修改密码
    async changePassword() {
      // 表单验证
      if (!this.passwordData.oldPassword) {
        uni.showToast({
          title: '请输入当前密码',
          icon: 'none'
        })
        return
      }
      
      if (!this.passwordData.newPassword) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        })
        return
      }
      
      if (this.passwordData.newPassword.length < 6) {
        uni.showToast({
          title: '新密码长度不能少于6个字符',
          icon: 'none'
        })
        return
      }
      
      if (!this.passwordData.confirmPassword) {
        uni.showToast({
          title: '请确认新密码',
          icon: 'none'
        })
        return
      }
      
      if (this.passwordData.newPassword !== this.passwordData.confirmPassword) {
        uni.showToast({
          title: '两次输入的新密码不一致',
          icon: 'none'
        })
        return
      }
      
      if (this.passwordData.oldPassword === this.passwordData.newPassword) {
        uni.showToast({
          title: '新密码不能与当前密码相同',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({
          title: '提交中...'
        })
        
        const res = await updatePassword(this.passwordData)
        console.log('修改密码响应:', res)
        
        if (res && res.code === 200) {
          uni.showToast({
            title: '密码修改成功，请重新登录',
            icon: 'success'
          })
          
          // 清除登录状态
          setTimeout(() => {
            uni.removeStorageSync('hasLogin')
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('token')
            
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login/login'
            })
          }, 1500)
        } else {
          uni.showToast({
            title: res.message || '密码修改失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('修改密码出错:', error)
        uni.showToast({
          title: error.message || '修改密码失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style>
.password-container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.back-btn {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  height: 60rpx;
}

.back-icon {
  font-size: 36rpx;
  color: #007AFF;
  margin-right: 6rpx;
}

.back-text {
  font-size: 28rpx;
  color: #007AFF;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-align: center;
}

.password-form {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
}

.form-group {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.form-group:last-child {
  border-bottom: none;
}

.form-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.form-input {
  font-size: 32rpx;
  color: #333;
  width: 100%;
  height: 80rpx;
}

.password-tips {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
}

.tips-title {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.tips-item {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 6rpx;
}

.submit-btn {
  background-color: #007AFF;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
  height: 90rpx;
  line-height: 90rpx;
}
</style> 